import {useEffect, useRef} from 'react'
import {DEBUG_MODE} from '../App.jsx'
import {randInt} from 'three/src/math/MathUtils.js'
import {useGame} from '../hooks/useGame.jsx'

const fakeUser = {
  userPhotoUrl: 'https://joinplayroom.com/images/testavatars/1.png',
  username: 'john'
}

import IconScore from '../assets/react.svg'

const gradients = [
  'bg-gradient-to-t from-yellow-600 to-yellow-400',
  'bg-gradient-to-t from-gray-600 to-slate-300',
  'bg-gradient-to-t from-yellow-900 to-amber-600',
  'bg-gradient-to-t from-black to-gray-600'
]

export const UI = () => {

  // 成绩排行榜
  const scoresBoardRef = useRef()

  const {status, greenMen, dispatch, scores, timer} = useGame()

  useEffect(() => {
    let toEnd = false
    const interval = setInterval(() => {
      scoresBoardRef.current?.scrollTo({
        top: 0,
        left: toEnd ? scoresBoardRef.current.scrollWidth : 0,
        behavior: 'smooth'
      })
      toEnd = !toEnd
    }, 4500)
    return () => clearInterval(interval)
  }, [])

  return (
    <main
      className="fixed top-0 left-0 right-0 bottom-0 z-10 flex flex-col gap-4 items-stretch justify-between pointer-events-none">
      <div
        className="flex w-full overflow-x-auto pointer-events-auto"
        ref={scoresBoardRef}
      >
        {
          scores.map((player, index) => (
            <div
              key={index}
              className={`p-2 flex-shrink-0 w-32 flex flex-col justify-center items-center gap-1 
              ${gradients[index < 3 ? index : 3]}
              `}
            >
              <img className="w-20 h-20 rounded-full border-4 border-white border-opacity-50" src={player.userPhotoUrl}
                   alt="Player avatar"/>
              <h2 className="font-bold text-sm text-white truncate max-w-full">#{index + 1} {player.username}</h2>
              <div className="flex items-center gap-1">
                <img src={IconScore} alt="Snowman icon" className="w-5"/>
                <p className="font-bold text-white">{player.kills}</p>
              </div>
            </div>
          ))
        }
      </div>
      {
        status === 'start' && (
          <div className="p-4">
            <p className="text-center text-white text-4xl font-bold">
              🌺🍉🥝🥥
              <br/>
              从邪恶的绿人手中拯救太极人
            </p>
            <p className="text-left  text-white text-lg">
              <br/>
              <b>🎲 类型</b> 输入绿人名字去杀死它
              <br/>
              <b>❤️ 喜欢</b> 立即杀死一个绿人
              <br/>
              <b>🎁 礼物</b> 投下一颗神奇的炸弹
            </p>
            <button
              className="mt-2 bg-green-200 text-green-700 font-bold p-4 rounded-md pointer-events-auto w-full"
              onClick={() => {
                dispatch({
                  type: 'start'
                })
              }}
            >开始
            </button>
          </div>
        )
      }
      <div className="p-4">
        {
          status === "gameover" && (
            <>
            <p className="text-center text-white text-lg font-bold">
              祝贺你
              <br />
              你从邪恶的绿人手里拯救了阴阳人
            </p>

            <button className="mt-2 bg-green-200 text-green-700 font-bold p-4 rounded-md pointer-events-auto w-full"
                    onClick={() => dispatch({type:"replay"})}>
                    再来一次
            </button>
          </>
          )
        }
        {
          status === 'playing' && (
            <p className="text-right text-4xl font-bold text-white">⏳ {timer}</p>
          )
        }
        {
          status === 'playing' && DEBUG_MODE && (
            <div className="mt-4 flex gap-4">
              <button
                className="mt-4 bg-red-400 p-4 rounded-md pointer-events-auto"
                onClick={() => {
                  dispatch({
                    type: 'attack',
                    player: fakeUser,
                    name: greenMen[randInt(0, greenMen.length - 1)].name
                  })
                }}
              >聊天
              </button>
              <button
                className="mt-4 bg-red-400 p-4 rounded-md pointer-events-auto"
                onClick={() => {
                  dispatch({
                    type: 'like',
                    player: fakeUser
                  })
                }}
              >喜欢
              </button>
              <button
                className="mt-4 bg-red-400 p-4 rounded-md pointer-events-auto"
                onClick={() => {
                  dispatch({
                    type: 'bomb',
                    player: fakeUser
                  })
                }}
              >礼物
              </button>
            </div>
          )
        }
      </div>
    </main>
  )
}
